<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
        <el-form-item prop="imei">
          <el-input v-model="formInline.imei" clearable placeholder="请输入IMEI"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">设备巡检</div>
      <!-- 表格 -->
      <div class="listfile">
        <div class="inspection_item" v-for="(item, index) in tableData" :key="index">
          <el-row>
            <el-col :span="14"> 
              <div class="title"> 设备IMEI： {{item.imei}}</div>
              <div class="info"> 所属项目：{{item.projectName}}</div>
              <div class="info"> 巡检时间：{{item.createTime}}</div>
              <div class="info"> 描述：{{item.inspectionText}}</div>
              <div class="info"> 备注：{{item.remark}}</div>
            </el-col>
            <el-col :span="10" style="text-align: right"> 
              <div class="photo"> 
                <div class="title"> 巡检图片近照     </div>
                <img :src="item.nearPhoto" alt="">
              </div>
              <div class="photo"> 
                <div class="title"> 巡检图片远照 </div>
                <img :src="item.farPhoto" alt="">
              </div>
              <div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage" 
          :page-sizes="[3]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

    </div>

  </div>
</template>

<script>
import { inspection, inspectionSearch } from '@/api/device'
  export default {
    data() {
      const validImei = (rule, value, callback)=> {
        console.log(rule,value)
          if(value && value.trim().length > 4) {
            callback()
          } else {
            callback(new Error('IMEI不能少于5位'))
          }
      }
      return {
        tableHeight: 'calc(100vh - 296px)',
        totalCount: 0, //总条数，总共有多少条数据
        currentPage: 1, // 当前页
        pageSize: 3, // 每页显示多少条
        addEdit_data: {},
        loading: true,
        tableData: [],
        formInline: {
          imei: ''
        },
        rules: {
          imei: [ {validator: validImei, trigger: 'blur'}]
        }
      }
    },
    methods: {
      //用户查询
      search() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.currentPage = 1
            this.loadData()
          } 
        })
      },
      // 分页
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.loadData()
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val
        this.loadData()
      },
      loadData(){
        if(this.formInline.imei){
          let imei = this.formInline.imei.substr(this.formInline.imei.length -5, 5)
          inspectionSearch({
            imei: imei,
            pageNum: this.currentPage,
            pageSize: this.pageSize
          }).then(res => {
            this.tableData = res.data.content;
            this.totalCount =  res.data.total
          }).catch()
        } else {
          inspection({
            pageNum: this.currentPage,
            pageSize: this.pageSize
          }).then(res => {
            this.tableData = res.data.content;
            this.totalCount = res.data.total;
          }).catch()
        }
      }

    },
    created(){
      this.loadData() 
    },
    mounted(){
      this.loading = false;
       
    },
    destroyed() {
      this.$destroy();
      this.historyData = [];
      this.page_Data = [];
    },
     watch: {
      formInline: {
        handler: function(val){
          if(val.imei) {
            
          } else {
            this.currentPage = 1
            this.loadData()
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped lang="scss">
.inspection_item {
  padding: 26px 20px;
  height: 210px;
  font-size: 16px;
  color: #fff; 
  &:nth-child(2n-1) {
    background: #142E4F;
    // border: 1px solid #20BCFC;

  }
  .title {
    color: #1EB0FC;
    font-family: SourceHanSansCN-Medium;
    margin-bottom: 30px;
  }
  .info {
    height: 32px;
  }
  .photo {
    display: inline-block;
    height: 100%;
    text-align: center;
    margin-left: 20px;
  }
  img {
    width: 146px;
    height: 120px;
    border-radius: 3px;
  }
}

</style>